<script>
  import debounce from '@/sheep/helper/debounce';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import sheep from '@/sheep';

  export default {
    name: 's-first-popup',
    components: { UniPopup },
    data() {
      return {
        info: {
          title: '弹窗标题',
          maskClick: false,
          bottomContentWidth: '362rpx',
          showWidth: true,
          isShowConfirm: true,
          showColseButton: true,
          showTitle: true,
          popupBackground: false,
          showConfirmButton: true,
          buttonName: '确定',
          allWidth: '100%',
          confirm: () => {
          },
        },
      };
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    methods: {
      debounce,
      openPopup(obj) {
        console.log('获取到的obj=>', obj);
        this.info.title = obj.title;
        this.info.maskClick = obj.maskClick;
        this.info.confirm = obj.confirm;
        this.info.bottomContentWidth = !!obj.bottomContentWidth ? obj.bottomContentWidth : '362rpx';
        if (obj.isShowConfirm === false) {
          this.info.isShowConfirm = false;
        }
        if (obj.showColseButton === false) {
          this.info.showColseButton = false;
        }
        if (obj.showTitle === false) {
          this.info.showTitle = false;
        }
        if (obj.popupBackground === true) {
          this.info.popupBackground = true;
        }
        if (obj.showWidth === false) {
          this.info.showWidth = false;
        }
        if (obj.showConfirmButton === false) {
          this.info.showConfirmButton = false;
        }
        if (obj.buttonName) {
          this.info.buttonName = obj.buttonName;
        }
        if (obj.allWidth) {
          this.info.allWidth = obj.allWidth;
        }
        this.$refs.popup.open();
      },
      confirm() {
        this.info.confirm();
      },
      closePopup() {
        this.$refs.popup.close();
        this.$emit('closePopup');
      },
    },
  };
</script>

<template>
  <uni-popup ref="popup" :maskClick="info.maskClick">
    <view class="first_popup flex flex-column align-center"
          :style="{
            width:info.showWidth ? '613rpx' : info.allWidth
          }"
    >
      <image class="first_popup_image" v-if="info.popupBackground" :src="`${IMG_URL}/index/personalInformation.png`"
             mode="widthFix"></image>
      <view class="first_popup_header flex align-center justify-center" v-if="info.showTitle">
        <text class="first_popup_header_text">{{ info.title }}</text>
      </view>
      <image class="first_popup_header_image z_20" :src="`${IMG_URL}/index/popupClose.png`" mode="widthFix"
             v-if="info.showColseButton"
             style="cursor:pointer;"
             @click="closePopup"></image>
      <slot name="content"></slot>

      <view class="flex align-center justify-between z_10" v-if="info.showConfirmButton">
        <slot name="bottomContent"></slot>
        <view class="first_popup_bottom flex align-center justify-center mt_48 mb_120"
              :style="{
                width:info.bottomContentWidth
              }"
              @click="debounce(confirm,500,true)"
              v-if="info.isShowConfirm"
              style="cursor:pointer;"
        >
          <text class="first_popup_bottom_text">{{ info.buttonName }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
  .first_popup {
    background: #FFFFFF;
    border-radius: 43rpx 43rpx 43rpx 43rpx;
    border: 2rpx solid #707070;
    //overflow: hidden;
    position: relative;

    .first_popup_image {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 613rpx;
      border-radius: 43rpx 43rpx 0 0;
    }

    .first_popup_header {
      width: 100%;
      height: 93rpx;
      background: #FFFFFF;
      border-radius: 43rpx 43rpx 0rpx 0rpx;
      //border: 1rpx solid #707070;
      position: relative;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #292929;
      }


    }

    .first_popup_header_image {
      width: 62rpx;
      position: absolute;
      right: -10rpx;
      top: 20rpx;
      transform: translateY(-50%);
    }

    .first_popup_bottom {
      height: 80rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }
</style>